<template>
    <div class="w-[45rem] pb-[4rem] flex flex-col gap-[2rem]">
        <!-- 内容 -->
        <div class="rounded-[1.25rem] bg-[#FFFFFF] p-[2rem] flex flex-col gap-[2rem] shadow-[0px_2px_8px_0px_#0F172A0A] border border-[#F3F4F6]">
            <!-- 作者信息 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center cursor-pointer" @click="handleAuthorClick(postContent.author)">
                    <div class="w-[2.5rem] h-[2.5rem] rounded-full bg-[#F3F4F6] flex-shrink-0">
                        <img :src="postContent.avatar" alt="" class="w-full h-full rounded-full" />
                    </div>
                    <div class="pl-[1rem] flex flex-col gap-[0.25rem]">
                        <p class="flex items-center">
                            <span class="text-[1rem] font-[Inter] font-medium leading-[1.5rem] text-[#000000] mr-[0.5rem]">
                                {{ postContent.author }}
                            </span>
                            <span class="text-[1rem] font-[Inter] font-normal leading-[1.25rem] text-[#2563EB] flex">
                                Lv.{{ postContent.authorLevel }}
                            </span>
                        </p>
                        <p class="flex">
                            <span class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#9CA3AF]">
                                {{ formatRelativeTime(postContent.time) }}
                            </span>
                        </p>
                    </div>
                </div>

                <!-- 更多操作按钮 -->
                <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end">
                    <div class="cursor-pointer">
                        <img src="/public/icon/more.png" alt="" class="w-[1rem] h-[0.35rem]">
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 管理员可见选项 -->
                            <template v-if="isAdmin">
                                <el-dropdown-item :command="{type: 'changeCategory', id: postContent.id}">修改分类</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'addTag', id: postContent.id}">添加标签</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'setTop', id: postContent.id}">设为置顶</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'setEssence', id: postContent.id}">设为精华</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'collect', id: postContent.id}">收藏</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'takeDown', id: postContent.id}" class="text-[#ff4d4f]">下架</el-dropdown-item>
                            </template>
                            <!-- 普通用户可见选项 -->
                            <template v-else>
                                <el-dropdown-item :command="{type: 'setEssence', id: postContent.id}">申请加精</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'collect', id: postContent.id}">收藏</el-dropdown-item>
                                <el-dropdown-item :command="{type: 'complaint', id: postContent.id}">投诉</el-dropdown-item>
                            </template>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>

            <!-- 标题和标签 -->
            <div class="flex flex-col gap-[1rem]">
                <div class="text-[1.5rem] font-bold leading-[2rem]">{{ postContent.title }}</div>
                
            </div>

            <!-- 文章内容 -->
            <div v-html="postContent.content" class="article-content"></div>

            <!-- 图片展示 -->
            <div v-if="postContent.images && postContent.images.length > 0">
                <!-- 单张图片 -->
                <div v-if="postContent.images.length === 1" class="w-[16rem] h-[9rem] overflow-hidden rounded-[0.25rem]">
                    <el-image 
                        :src="postContent.images[0]" 
                        fit="cover"
                        class="w-[full] h-[full]" 
                        style="aspect-ratio: 16/9;"
                        :preview-src-list="postContent.images"
                        :initial-index="0"
                        preview-teleported
                    />
                </div>
                <!-- 多张图片 -->
                <div v-else class="grid grid-cols-3 gap-[0.5rem] max-w-[25.375rem]">
                    <div 
                        v-for="(image, index) in postContent.images.slice(0, 9)" 
                        :key="index"
                        class="aspect-square w-[8.125rem] h-[8.125rem] overflow-hidden rounded-[0.25rem]"
                    >
                        <el-image 
                            :src="image" 
                            fit="cover"
                            class="w-full h-full"
                            :preview-src-list="postContent.images"
                            :initial-index="index"
                            preview-teleported
                            hide-on-click-modal
                        />
                    </div>
                </div>
            </div>

            <!-- 附件列表 -->
            <div v-if="postContent.attachmentList && postContent.attachmentList.length > 0">
                <div class="flex flex-col">
                    <div 
                        v-for="(file, index) in postContent.attachmentList" 
                        :key="index"
                        class="flex items-center rounded-[0.5rem] border border-[#E5E7EB] hover:bg-[#F9FAFB] cursor-pointer p-[0.75rem]"
                        @click="handleFileClick(file)"
                    >
                        <img :src="getFileIcon(file.type)" class="w-[1.25rem] h-[1.5rem] mr-[0.75rem]" alt="file" />
                        <div class="flex-1 truncate text-[1rem] font-[Inter] font-normal leading-[1.25rem] text-[#000000]">{{ file.name }}</div>
                        <!-- <div class="flex items-center text-[0.75rem] text-[#6B7280]">
                            <span class="mr-[1rem]">{{ file.size }}</span>
                            <span>{{ file.download }}次下载</span>
                        </div> -->
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-[0.5rem]">
                <span 
                    v-for="tag in postContent.tags" 
                    :key="tag"
                    class="px-[0.75rem] py-[0.25rem] border-[1px] border-solid border-[#2563EB] rounded-[0.3rem] text-[1rem] font-[Inter] font-normal leading-[1rem] text-[#2563EB] cursor-pointer"
                >
                    {{ tag }}
                </span>
            </div>
            <!-- 操作区域 -->
            <div class="flex items-center gap-[0.5rem] pt-[1.5rem]" style="border-top: 1px solid #F3F4F6">
                <div class="flex items-center gap-[0.5rem] cursor-pointer" @click="handleLike">
                    <img src="/public/icon/like.png" alt="" class="w-[1rem] h-[1rem]">
                    <span class="text-[#6B7280]">{{ postContent.like }}</span>
                </div>
                <div class="flex items-center gap-[0.5rem] cursor-pointer ml-[1.5rem]" @click="toggleComments">
                    <img src="/public/icon/comments.png" alt="" class="w-[1rem] h-[1rem]">
                    <span class="text-[#6B7280]">{{ postContent.comment }}</span>
                </div>
                <div class="flex items-center gap-[0.5rem] cursor-pointer ml-[1.5rem]">
                    <img src="/public/icon/collect.png" alt="" class="w-[1rem] h-[1rem]">
                </div>
                <div class="flex items-center gap-[0.5rem] cursor-pointer ml-[1.5rem]" @click="openComplaint">
                    <img src="/public/icon/warning.png" alt="" class="w-[1.25rem] h-[1.25rem]">
                </div>
            </div>

            <!-- 点赞人数 -->
            <div v-if="postContent.likeNames && postContent.likeNames.length > 0" class="color-[#8b8e9d] text-[1rem] font-[Inter] font-normal leading-[1.25rem]">
                <template v-for="(name,index) in postContent.likeNames">
                    <span class="color-[#fda956] cursor-pointer">{{ name }}</span><span v-if="index != postContent.likeNames.length - 1">、</span>
                </template>
                觉得很赞
            </div>

            <!-- 评论部分 -->
            <div v-if="showComment" class="mt-[1.5rem]">
                <!-- 评论分割线 -->
                <div class="w-full h-[1px] bg-[#F3F4F6] my-[1rem]"></div>

                <!-- 评论输入框 -->
                <CommentInput 
                    :post-id="postContent.id"
                    @submit="handleCommentSubmit"
                />

                <!-- 评论列表 -->
                <div v-if="commentList.length > 0" class="mt-[1.5rem]">
                    <!-- 评论标题 -->
                    <div class="font-medium text-[1rem] mb-[1rem]">全部评论 ({{ postContent.comment }})</div>
                    
                    <!-- 评论项 -->
                    <div v-for="comment in visibleComments" :key="comment.id" class="flex flex-col gap-[0.5rem] mb-[2rem]">
                        <div class="flex items-start gap-[0.5rem]">
                            <img :src="comment.avatar" class="w-[2rem] h-[2rem] rounded-full" />
                            <div class="flex flex-col gap-[0.25rem] w-full">
                                <div class="flex items-center gap-[0.5rem]">
                                    <span class="text-[0.875rem] font-[Inter] font-medium leading-[1.25rem] text-[#000000]">{{ comment.author }}</span>
                                    <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ formatRelativeTime(comment.time) }}</span>
                                </div>
                                <div class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#4B5563]">
                                    {{ comment.content }}
                                </div>
                                <div class="flex items-center gap-[1rem] mt-[0.5rem]">
                                    <div class="flex items-center gap-[0.25rem] cursor-pointer">
                                        <img src="/public/icon/like.png" class="w-[0.875rem] h-[0.875rem]" />
                                        <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ comment.likes }}</span>
                                    </div>
                                    <div class="flex items-center gap-[0.25rem] cursor-pointer" @click="toggleReplyInput(comment.id, comment.author, 0)">
                                        <img src="/public/icon/comments.png" class="w-[0.875rem] h-[0.875rem]" />
                                        <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">回复</span>
                                    </div>
                                </div>
                                
                                <!-- 回复输入框 -->
                                <div v-if="activeReplyInfo.commentId === comment.id && activeReplyInfo.replyId === 0" class="mt-[0.5rem]">
                                    <CommentInput 
                                        :post-id="postContent.id"
                                        :comment-id="comment.id"
                                        :reply-to="comment.author"
                                        @submit="handleCommentSubmit"
                                        @cancel="cancelReply"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 回复列表 -->
                        <div v-if="comment.replies && comment.replies.length > 0" class="ml-[2.5rem]">
                            <!-- 显示前2条回复 -->
                            <div 
                                v-for="reply in comment.replies.slice(0, comment.showAllReplies ? comment.replies.length : 2)" 
                                :key="reply.id" 
                                class="flex items-start gap-[0.5rem] mt-[0.5rem]"
                            >
                                <img :src="reply.avatar" class="w-[1.5rem] h-[1.5rem] rounded-full" />
                                <div class="flex flex-col gap-[0.25rem] w-full">
                                    <div class="flex items-center gap-[0.5rem]">
                                        <span class="text-[0.875rem] font-[Inter] font-medium leading-[1.25rem] text-[#000000]">{{ reply.author }}</span>
                                        <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ formatRelativeTime(reply.time) }}</span>
                                    </div>
                                    <div class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#4B5563]">
                                        <span class="text-[#2563EB]">@{{ reply.replyTo }}</span> {{ reply.content }}
                                    </div>
                                    <div class="flex items-center gap-[1rem] mt-[0.5rem]">
                                        <div class="flex items-center gap-[0.25rem] cursor-pointer">
                                            <img src="/public/icon/like.png" class="w-[0.875rem] h-[0.875rem]" />
                                            <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">{{ reply.likes }}</span>
                                        </div>
                                        <div class="flex items-center gap-[0.25rem] cursor-pointer" @click="toggleReplyInput(comment.id, reply.author, reply.id)">
                                            <img src="/public/icon/comments.png" class="w-[0.875rem] h-[0.875rem]" />
                                            <span class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">回复</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 回复的回复输入框 -->
                                    <div v-if="activeReplyInfo.commentId === comment.id && activeReplyInfo.replyId === reply.id" class="mt-[0.5rem]">
                                        <CommentInput 
                                            :post-id="postContent.id"
                                            :comment-id="comment.id"
                                            :reply-to="reply.author"
                                            :reply-id="reply.id"
                                            @submit="handleCommentSubmit"
                                            @cancel="cancelReply"
                                        />
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 展开更多回复按钮 -->
                            <div 
                                v-if="comment.replies.length > 2 && !comment.showAllReplies" 
                                class="text-[0.75rem] text-[#2563EB] cursor-pointer mt-[0.5rem] ml-[2rem]"
                                @click="toggleReplies(comment.id)"
                            >
                                展开全部{{ comment.replies.length }}条回复
                            </div>
                            
                            <!-- 收起回复按钮 -->
                            <div 
                                v-if="comment.showAllReplies && comment.replies.length > 2" 
                                class="text-[0.75rem] text-[#2563EB] cursor-pointer mt-[0.5rem] ml-[2rem]"
                                @click="toggleReplies(comment.id)"
                            >
                                收起回复
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载更多评论按钮 -->
                    <div 
                        v-if="commentList.length > commentsPerPage && !showAllComments" 
                        class="w-[11rem] h-[3.25rem] rounded-[9999rem] bg-[#ffffff] text-[1.125rem] leading-[1.75rem] flex items-center justify-center text-[#18181B] cursor-pointer font-[Inter] font-700 m-auto" 
                        style="border: 1px solid #18181B"
                        @click="loadMoreComments"
                    >
                        加载更多评论
                    </div>
                </div>
            </div>
        </div>

        <!-- 投诉弹窗 -->
        <Complaint 
            v-model="showComplaintDialog"
            :post-id="postContent.id"
            @close="showComplaintDialog = false"
        />

        <!-- 文件下载弹窗 -->
        <FileDownload
            v-model="showFileDownload"
            :file-url="currentFileUrl"
            :file-name="currentFileName"
            @close="showFileDownload = false"
            @download="handleFileDownload"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { formatRelativeTime } from '@/utils/time'
import { message } from '@/utils/message'
import CommentInput from '@/components/CommentInput/index.vue'
import FileDownload from '@/components/FileDownload/index.vue'
import Complaint from '@/views/Forum/index/components/Complaint.vue'

// 定义类型接口
interface Reply {
    id: number;
    author: string;
    avatar: string;
    content: string;
    time: string;
    likes: number;
    replyTo: string;
}

interface Comment {
    id: number;
    author: string;
    avatar: string;
    content: string;
    time: string;
    likes: number;
    showAllReplies: boolean;
    replies: Reply[];
}

interface PostContent {
    id: number;
    time: string;
    author: string;
    authorLevel: string;
    avatar: string;
    title: string;
    tags: string[];
    content: string;
    attachmentList: {
        name: string;
        size: string;
        type: string;
        download: number;
        url: string;
    }[];
    images: string[];
    browse: number;
    comment: number;
    like: number;
    likeNames: string[];
}

const router = useRouter()

// 是否为管理员
const isAdmin = ref(true)

// 帖子内容
const postContent = ref<PostContent>({
    id: 1,
    time: '2025-05-26 8:00:00',
    author: '张三',
    authorLevel: '9',
    avatar: '/public/images/avatar.png',
    title: '如何快速掌握编程技巧？',
    tags: ['技术讨论', '编程', '学习'],
    content: `
<h2 class="text-[1.25rem] font-bold mb-[1rem]">引言</h2>
<p class="mb-[1rem]">在编程学习过程中，找到适合自己的学习方法至关重要。本文将分享一些我在学习过程中总结的经验和技巧。</p>

<h2 class="text-[1.25rem] font-bold mb-[1rem]">学习方法</h2>
<h3 class="text-[1rem] font-bold mb-[0.5rem]">制定明确的学习计划</h3>
<p class="mb-[1rem]">根据自己的时间和能力，制定合理的学习计划。建议将大目标分解成小任务，循序渐进。</p>

<h3 class="text-[1rem] font-bold mb-[0.5rem]">多动手实践</h3>
<p class="mb-[1rem]">编程最重要的就是实践，建议每学习一个知识点就动手写代码验证。</p>

<h3 class="text-[1rem] font-bold mb-[0.5rem]">参与开源项目</h3>
<p class="mb-[1rem]">通过阅读和参与开源项目，可以学习到很多实用的编程技巧和最佳实践。</p>

<h2 class="text-[1.25rem] font-bold mb-[1rem]">实践建议</h2>
<p class="mb-[0.5rem]">除了理论学习，实践也非常重要。以下是一些实践建议：</p>
<ul class="list-disc pl-[1.5rem] mb-[1rem]">
    <li class="mb-[0.5rem]">建立自己的代码库，记录学习过程中的代码片段</li>
    <li class="mb-[0.5rem]">尝试写技术博客，梳理和分享自己的学习心得</li>
    <li class="mb-[0.5rem]">参与技术社区讨论，与他人交流学习经验</li>
</ul>

<h2 class="text-[1.25rem] font-bold mb-[1rem]">总结</h2>
<p>学习编程是一个循序渐进的过程，需要耐心之外的努力和正确的方法。希望这些经验分享能对大家有所帮助。</p>
`,
    attachmentList: [
        {
            name: "学习资料整理.pdf",
            size: "2.5M",
            type: "pdf",
            download: 100,
            url: "https://www.baidu.com",
        },
        {
            name: "项目截图.png",
            size: "1.8M",
            type: "png",
            download: 80,
            url: "https://www.baidu.com",
        },
        {
            name: "源代码示例.zip",
            size: "4.2M",
            type: "zip",
            download: 56,
            url: "https://www.baidu.com",
        },
        {
            name: "详细文档说明.docx",
            size: "1.2M",
            type: "docx",
            download: 34,
            url: "https://www.baidu.com",
        },
    ],
    images: [
        'https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/97d400be206d491da31843b9abadb5da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rWq6YGP:q75.awebp?rk3s=f64ab15b&x-expires=1750044673&x-signature=kU4a72Bys8hyvM8OsmPOS5ouHw8%3D'
    ],
    browse: 100,
    comment: 100,
    like: 100,
    likeNames: ['张三', '李四', '王五']
})

// 评论列表
const commentList = ref<Comment[]>([
    {
        id: 1,
        author: '李四',
        avatar: '/public/images/avatar.png',
        content: '感谢分享！我也觉得实践很重要。',
        time: '2025-05-26 10:00:00',
        likes: 100,
        showAllReplies: false,
        replies: [
            {
                id: 3,
                author: '张三',
                avatar: '/public/images/avatar.png',
                content: '谢谢你的分享，我也有同样的感受。',
                time: '2025-05-26 12:00:00',
                likes: 100,
                replyTo: '李四'
            },
            {
                id: 4,
                author: '李三三',
                avatar: '/public/images/avatar.png',
                content: '+1',
                time: '2025-05-26 13:00:00',
                likes: 200,
                replyTo: '张三'
            },
            {
                id: 5,
                author: '王小五',
                avatar: '/public/images/avatar.png',
                content: '学习了，感谢分享',
                time: '2025-05-26 14:00:00',
                likes: 50,
                replyTo: '李四'
            }
        ]
    },
    {
        id: 2,
        author: '王五',
        avatar: '/public/images/avatar.png',
        content: '感谢分享！我也觉得实践很重要，最近在做一个个人项目，收获很大。',
        time: '2025-05-26 14:00:00',
        likes: 100,
        showAllReplies: false,
        replies: []
    },
    {
        id: 6,
        author: '赵六',
        avatar: '/public/images/avatar.png',
        content: '非常实用的建议，已经收藏了。',
        time: '2025-05-26 15:00:00',
        likes: 78,
        showAllReplies: false,
        replies: []
    },
    {
        id: 7,
        author: '孙七',
        avatar: '/public/images/avatar.png',
        content: '这篇文章对我帮助很大，感谢分享。',
        time: '2025-05-26 16:00:00',
        likes: 65,
        showAllReplies: false,
        replies: []
    },
    {
        id: 8,
        author: '钱八',
        avatar: '/public/images/avatar.png',
        content: '我也是编程新手，这些建议非常适合我。',
        time: '2025-05-26 17:00:00',
        likes: 43,
        showAllReplies: false,
        replies: []
    },
    {
        id: 9,
        author: '周九',
        avatar: '/public/images/avatar.png',
        content: '希望可以分享更多关于编程学习的文章。',
        time: '2025-05-26 18:00:00',
        likes: 32,
        showAllReplies: false,
        replies: []
    }
])

// 评论显示状态
const showComment = ref(false)

// 回复信息
const activeReplyInfo = ref({
    commentId: 0,
    replyTo: '',
    replyId: 0
})

// 投诉弹窗
const showComplaintDialog = ref(false)

// 文件下载相关
const showFileDownload = ref(false)
const currentFileUrl = ref('')
const currentFileName = ref('')

// 处理作者点击
const handleAuthorClick = (author: string) => {
    console.log('查看作者信息:', author)
}

// 处理下拉菜单命令
interface CommandPayload {
    type: string;
    id: number;
}

const handleCommand = (command: CommandPayload) => {
    const { type, id } = command
    
    switch (type) {
        case 'changeCategory':
            console.log('修改分类', id)
            break
        case 'addTag':
            console.log('添加标签', id)
            break
        case 'setTop':
            console.log('设为置顶', id)
            break
        case 'setEssence':
            console.log('设为精华/申请加精', id)
            break
        case 'collect':
            console.log('收藏', id)
            break
        case 'takeDown':
            console.log('下架', id)
            break
        case 'complaint':
            console.log('投诉', id)
            openComplaint()
            break
        default:
            break
    }
}

// 处理点赞
const handleLike = () => {
    postContent.value.like++
}

// 切换评论显示
const toggleComments = () => {
    showComment.value = !showComment.value
}

// 打开投诉弹窗
const openComplaint = () => {
    showComplaintDialog.value = true
}

// 切换回复输入框
const toggleReplyInput = (commentId: number, replyTo: string, replyId?: number) => {
    // 如果已经是当前回复，则关闭
    if (activeReplyInfo.value.commentId === commentId && 
        activeReplyInfo.value.replyTo === replyTo &&
        activeReplyInfo.value.replyId === (replyId || 0)) {
        cancelReply()
        return
    }
    
    // 设置当前回复信息
    activeReplyInfo.value = {
        commentId,
        replyTo,
        replyId: replyId || 0
    }
}

// 取消回复
const cancelReply = () => {
    activeReplyInfo.value = {
        commentId: 0,
        replyTo: '',
        replyId: 0
    }
}

// 处理评论提交
interface CommentData {
    content: string;
    postId?: number;
    commentId?: number;
    replyTo?: string;
    replyId?: number;
    time: string;
}

const handleCommentSubmit = (data: CommentData) => {
    console.log('提交评论数据:', data)
    
    try {
        // 如果是回复评论
        if (data.commentId) {
            const targetComment = commentList.value.find(comment => comment.id === data.commentId)
            if (!targetComment) {
                throw new Error(`未找到ID为 ${data.commentId} 的评论`)
            }
            
            // 确保replies数组存在
            if (!targetComment.replies) {
                targetComment.replies = []
            }
            
            // 生成新回复
            const newReply: Reply = {
                id: Date.now(),
                author: '当前用户',
                avatar: '/public/images/avatar.png',
                content: data.content,
                time: data.time,
                likes: 0,
                replyTo: data.replyTo || ''
            }
            
            // 添加回复
            targetComment.replies.push(newReply)
            message.success('回复成功')
        } else {
            // 添加新评论
            const newComment: Comment = {
                id: Date.now(),
                author: '当前用户',
                avatar: '/public/images/avatar.png',
                content: data.content,
                time: data.time,
                likes: 0,
                showAllReplies: false,
                replies: []
            }
            
            // 添加评论
            commentList.value.push(newComment)
            // 如果显示的评论数量小于总评论数，则添加到可见评论中
            if (showAllComments.value || visibleComments.value.length < commentsPerPage.value) {
                visibleComments.value.push(newComment)
            }
            message.success('评论成功')
        }
        
        // 关闭回复框
        cancelReply()
    } catch (error) {
        console.error('评论/回复失败:', error)
        message.error(error instanceof Error ? error.message : '评论失败')
    }
}

// 处理文件点击
const handleFileClick = (file: any) => {
    console.log('点击文件:', file)
    currentFileUrl.value = file.url
    currentFileName.value = file.name
    showFileDownload.value = true
}

// 处理文件下载
const handleFileDownload = (fileUrl: string) => {
    console.log('下载文件:', fileUrl)
    message.success('开始下载文件')
}

// 获取文件图标
const getFileIcon = (type: string) => {
    return `/public/icon/${type}.png`
}

// 评论分页相关
const commentsPerPage = ref(3)
const showAllComments = ref(false)
const visibleComments = ref<Comment[]>([])

// 初始化显示评论
onMounted(() => {
    visibleComments.value = commentList.value.slice(0, commentsPerPage.value)
})

// 加载更多评论
const loadMoreComments = () => {
    const nextBatch = commentList.value.slice(visibleComments.value.length, visibleComments.value.length + commentsPerPage.value)
    visibleComments.value = [...visibleComments.value, ...nextBatch]
    showAllComments.value = visibleComments.value.length >= commentList.value.length
}

// 切换回复显示
const toggleReplies = (commentId: number) => {
    const targetComment = commentList.value.find(comment => comment.id === commentId)
    if (targetComment) {
        targetComment.showAllReplies = !targetComment.showAllReplies
    }
}
</script>

<style scoped>
.article-content {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #4B5563;
}

.article-content h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #111827;
}

.article-content h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #111827;
}

.article-content p {
    margin-bottom: 1rem;
}

.article-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}
</style>